<template>
  <div>
    <div
      class="al_list"
      v-for="item in album"
      :key="item.id"
      @click="toAlbumList(item.id)"
    >
      <div class="img">
        <img :src="item.picUrl + '?param=100y100'" alt="" />
      </div>
      <div class="tlt">
        <p class="van-ellipsis">{{ item.name }}</p>
        <p class="van-ellipsis">
          {{ formatTime(item.publishTime) }}<big style="color:#11bf72"> {{ item.size }}</big>首
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MusicAlbum",
  props: ["album"],

  data() {
    return {};
  },

  mounted() {},

  methods: {
    formatTime(time) {
      var date = new Date(time); // 初始化日期
      var year = date.getFullYear(); //获取年份
      var month = date.getMonth() + 1; // 获取月份
      var day = date.getDate(); // 获取具体日
      return year + "年" + month + "月" + day + "日 ";
    },

    toAlbumList(id) {
      this.$router.push({
        path: "MusicAlbumList",
        query: {
          id,
          t: Date.now(), //刷新相同组件
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.al_list {
  display: flex;
  height: 3.75rem;
  width: 100%;
  margin-bottom: 0.3125rem;
  .img {
    
    width: 3.55rem;
    height: 3.55rem;
    padding: 0.3125rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.3125rem;
    }
  }
  .tlt {
    flex: 1;
    height: 3.75rem;
    max-width: 18.125rem;
    padding: 0.625rem;
    P {
      line-height: 1.875rem;
      text-align: left;
    }
    p:nth-child(1) {
      font-size: 1rem;
    }
    p:nth-child(2) {
      color:#999;
      font-size: 0.75rem;
    }
  }
}
</style>